<template>
    <div class="barCode" id="barCode">
        <vmHead></vmHead>
        <div class="barCode-box">
            <p>条形码</p>
            <div class="demo-input-suffix">
                <div class="sousuo">
                    <div class="erCode"></div>
                    <input v-model="inputVal" placeholder="直接输入或扫描条形码自动生成进行查看套餐信息" type="search" @keyup.enter="getResource" autofocus="autofocus" />
                    <button @click="getResource">搜索</button>

                </div>
                <button class="barca" @click="canDetail">查看详情</button>
                <button class="barcan" @click="consDetail">导出详情</button>

            </div>
            <div class="modelPop" v-if="isMonLay">
                <img src="../../static/img/loading.png" class="imgRotate" alt="">
            </div>
            <div v-if="isNotDate" style="text-align: center;margin: 50px;font-size: 16px;">
                <img src="../../static/img/zanwu.png" alt="" class="icon-noData">
            </div>
            <div id="printContent" ref="print" v-show="isShow">
                <div class="one">收费小票</div>
                <div style="margin-left:5px;margin-top:10px;">姓名:{{tableData.name}}</div>
                <div class="tit">*请勿丢失，否则无法领取物资</div>
                <ul class="two">
                    <li v-for="(v,ind) in professList" :key="ind">
                        <span>{{v.charge_name}}:</span>
                        <p>{{v.money}}</p>
                    </li>
                </ul>
                <li class="countMoney">总计:&yen;{{chargeData.total_money}}</li>
                <li style="margin-left: 10px;">公寓用品领取地点:北区体育馆，综合楼南门</li>
<!--                <li style="text-align: right;padding: 10px 10px;">军训服领取地点:综合楼一楼侧门</li>-->
                <li class="three" id="qrcode" ref="qrcode"></li>
                <li style="color:red;text-align: center;font-size: 15px;margin-top:10px;">注：凭此二维码领取物资</li>
            </div>
            <article v-if="isShow">
                <div class="demo-side">
                    <div class="packagePro">
                        <p>学生信息</p>
                        <ul class="studentInf">
                            <li>
                                <label>姓名：</label><span>{{tableData.name}}</span>
                                <label>身份证：</label><span>{{tableData.id_card}}</span>
                            </li>
                            <li>
                                <label>院系：</label><span>{{tableData.courtyard_department}}</span>
                                <label>专业：</label><span>{{tableData.professional}}</span>
                                <label>收费方式：</label><span>{{chargeData.is_only==0?'线上':chargeData.is_only==1 ?'线下' : '暂无数据'}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="packageTable">
                        <p style="border:none;">套餐信息</p>
                        <ul class="payment">
                            <li>套餐名称：专科普通套餐</li>
                        </ul>
                        <table class="myTable" v-html="tableList"></table>
                        <p style="text-align: right;">总计：<span class="money">&yen;{{chargeData.total_money}}</span></p>
                    </div>
                </div>
                <section class="packagePayment">
                    <ul class="foot-pay">
                        <li>选择支付方式</li>
                        <li>
                            <el-checkbox-group v-model="checkList" @change="changeCheckList" class="payMoney">
                                <el-checkbox label="0" :disabled="paymentState">
                                    <mark>中 国 银 联</mark>
                                    <el-input-number v-model="payTypes.state0" :min="0" controls-position="right" size="small" :disabled="paymentState" class="countPas" @change="changeCheckList(0)"></el-input-number>元
                                </el-checkbox>
                                <el-checkbox label="1" :disabled="paymentState">
                                    <mark>支付宝支付</mark>
                                    <el-input-number v-model="payTypes.state1" :min="0" controls-position="right" size="small" :disabled="paymentState" class="countPas" @change="changeCheckList(1)"></el-input-number>元
                                </el-checkbox>
                                <el-checkbox label="2" :disabled="paymentState">
                                    <mark>微 信 支 付</mark>
                                    <el-input-number v-model="payTypes.state2" :min="0" controls-position="right" size="small" :disabled="paymentState" class="countPas" @change="changeCheckList(2)"></el-input-number>元
                                </el-checkbox>
                                <el-checkbox label="3" :disabled="paymentState">
                                    <mark>现 金 支 付</mark>
                                    <el-input-number v-model="payTypes.state3" :min="0" controls-position="right" size="small" :disabled="paymentState" class="countPas" @change="changeCheckList(3)"></el-input-number>元
                                </el-checkbox>
                            </el-checkbox-group>
                            <div class="submit-notice-num" v-if="gongbenPrice">
                                <div style="font-size: 15px;">请输入一卡通卡号</div>
                                <p style="display:inline-flex;"><pre>*</pre>卡号：
                                    <el-input v-model="tableData.card_number" :disabled="paymentState" placeholder="请输入一卡通卡号" auto-complete="off"></el-input>
                                </p>
                            </div>
                          <div class="submit-notice-num" v-if="gongbenPrice">
                            <div style="font-size: 15px;">请输入一卡通手机号码</div>
                            <p style="display:inline-flex;"><pre>*</pre>手机号码：
                            <el-input v-model="tableData.other_phone" :disabled="paymentState" placeholder="请输入一卡通手机号码" auto-complete="off"></el-input>
                            </p>
                          </div>
                        </li>
                        <li>
                            <p>实付总额：<span class="money">&yen;{{totalAmount}}</span></p>
                        </li>
                        <li>

                          <el-button style="margin-top: 20px;" type="success" v-if="chargeData.is_only==0 && !tableData.card_number"  @click="sunmitCardNumber">确认发放一卡通</el-button>
                            <el-button style="margin-top: 20px;" type="success" v-if="!isClick" @click="printContent">打印</el-button>
                            <el-button style="margin-top: 20px;" :class="{'gray':paymentState}" type="success" @click="confirmReceipt">{{submitName}}</el-button>
                        </li>
                    </ul>
                </section>
            </article>
        </div>
    </div>
</template>

<script>
    import vmHead from './common/mainHeader'
    import apis from '../apis/apis';
    import QRCode from 'qrcodejs2'
    export default {
        data() {
            return {
                qrcodeUrl: '',
                inputVal: '', //'185110101002',
                submitName: '确认收款',
                paymentState: false,
                isNotDate: false,
                isMonLay: false,
                isClick: true,
                isShow: false,
                sumPrice: {}, // 支付详情
                tableData: {},
                chargeData: {},
                checkList: [], // 支付选中状态
                totalAmount: 0, //总金额
                payTypes: {
                    state0: 0,
                    state1: 0,
                    state2: 0,
                    state3: 0
                },
                studentPayment: {
                    pay_type: '',
                    is_only: '1',
                    amount_real: '',
                    students_id: '',
                    extension: '嗯嗯嗯'
                },
                professList: [{
                    charge_name: 'charge_name',
                    money: 'money',
                    created_at: 'created_at',
                    admin_user: 'admin_user'
                }],
                getPaymentDetail: {},
                tableList: '',
                gongbenPrice: false
            }
        },
        components: {
            QRCode,
            vmHead
        },
        created() {
            var self = this;
            self.isMonLay = true;
            self.gongbenPrice = false;
        },
        mounted() {
            var self = this;
            this.notInfo();
        },
        beforeRouteLeave(to, from, next) {
            if(to.name == "index") {
                sessionStorage.clear();
                this.$router.push('/login');
            } else {
                next();
            }
        },
        methods: {
            /* 初始化数据 */
            defData() {
                var self = this;
                self.checkList = [];
                self.totalAmount = 0;
                self.payTypes = {
                    state0: 0,
                    state1: 0,
                    state2: 0,
                    state3: 0
                }
            },

            //  提交一卡通卡号
            sunmitCardNumber(){

                // 弹出蒙版框
                var self = this;
                this.$prompt('请输入一卡通卡号', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showConfirmButton:true,
                    inputValue: '',
                    inputPattern: /^([1-9][0-9]*){1,3}$/,
                    inputErrorMessage: '请输入正确卡号'
                }).then(({
                             value
                         }) => {
                    let params = {
                        student_id: self.tableData.id,
                        card_number: value
                    }
                    apis.contApi.setcardNumber(params).then((res) => {
                        if(res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            self.getResource();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }).catch((error) => {
                        console.error(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },

            /* 数组判断 */
            isArr(arr) {
                return Object.prototype.toString.call(arr) === '[object Array]'
            },
            isNum(inputData) {　　
                if(Number(inputData).toString() == 'NaN') return false;
                else return true;
            },
            /* 收款打印 */
            printContent() {
                this.$print(this.$refs.print); //$refs的值要和html里的ref一致
            },
            /* 生成二维码 */
            qrcode() {
                let qrcode = new QRCode('qrcode', {
                    width: 100, // 设置宽度
                    height: 100, // 设置高度
                    text: this.inputVal
                })
            },
            /* 查看缴费详情 */
            canDetail() {
                var self = this;
                apis.contApi.getTeacherDetail().then(res => {
                    if(res.data.code == 0) {
                        var sumPrice = res.data.data;
                        var template = `<table style="width:100%">
                              <tr><th>总人数(人)</th><th>微信(元)</th><th>支付宝(元)</th><th>银联(元)</th><th>现金(元)</th><th>总金额(元)</th></tr>
                              <tr><td>${sumPrice.allnum}</td><td>${sumPrice.wechat}</td><td>${sumPrice.alipay}</td><td>${sumPrice.unionpay}</td><td>${sumPrice.cash}</td><td>${sumPrice.allMonery}</td></tr>
                          </table>`
                        this.$alert(template, '缴费详情', {
                            dangerouslyUseHTMLString: true
                        });
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            /* 导出收费老师收费详情表格 */
            consDetail() {
                var self = this;
                var params = {
                    user_id: sessionStorage.getItem('ids'),
                    is_export: 1
                }
                let urls = this.GLOBAL.baseURL + 'admin/charge/exportTeacherExecl?' + self.convertObj(params);
                window.open(urls, "_blank")
            },
            /* url转换*/
            convertObj(data) {
                var _result = [];
                for(var key in data) {
                    var value = data[key];
                    if(value.constructor == Array) {
                        value.forEach(function(_value) {
                            _result.push(key + "=" + _value);
                        });
                    } else {
                        _result.push(key + '=' + value);
                    }
                }
                return _result.join('&');
            },
            /* 序号搜索 */
            getResource() {
                var self = this;
                self.defData();
                self.qrcodeUrl = self.inputVal;
                if(!self.qrcodeUrl) {
                    this.$message('请输入搜索序列号');
                    return false;
                }
                self.isMonLay = true;
                self.$nextTick(function() {
                    document.getElementById('qrcode').innerHTML = '';
                    self.qrcode();
                })
                var params= {
                    notice_number: self.inputVal
                }
                apis.contApi.getAdminStudentResource(params).then(res => {
                    if(res.data.code != 0) {
                        self.isShow = self.isClick = false;
                        self.isNotDate = true;
                        self.notInfo();
                        setTimeout(() => {
                            self.$message({
                                type: 'warning',
                                duration: 2000,
                                message: res.data.msg,
                                offset: 300
                            });
                        }, 1000)
                        return false;
                    } else {
                        self.isShow = self.isClick = true;
                        self.isNotDate = false;

                    }
                    if(!res.data.data) {
                        self.isShow = self.isClick = false;
                        self.isNotDate = true;
                        self.notInfo();
                        return false;
                    }
                    if(res.data.data.state == 0) {
                        self.submitName = '确认收款';
                        self.paymentState = false;
                        self.isClick = true;
                    } else if(res.data.data.state == 1) {
                        self.submitName = '已收款';
                        self.paymentState = true;
                        self.isClick = false;

                        let infoList = res.data.data.extension;
                        var typeList = [];
                        for(var i = 0; i < infoList.length; i++) {
                            typeList[i] = infoList[i].type;

                            if(infoList[i].type == '0') {
                                self.payTypes.state0 = infoList[i].money;
                            } else if(infoList[i].type == '1') {
                                self.payTypes.state1 = infoList[i].money;
                            } else if(infoList[i].type == '2') {
                                self.payTypes.state2 = infoList[i].money;
                            } else if(infoList[i].type == '3') {
                                self.payTypes.state3 = infoList[i].money;
                            } else {
                                typeList.splice(i, 1);
                            }
                        }

                        setTimeout(() => {
                            self.checkList = typeList;
                            self.changeCheckList(self.checkList)
                        }, 1000)
                    }

                    self.chargeData = res.data.data;
                    self.professList = res.data.data.list.items;
                    self.tableData = res.data.data.list.stu;
                    self.professList.map(v => {
                        v.admin_user = self.tableData.name;
                        if(v.charge_name == '一卡通工本费') {
                            self.gongbenPrice = true;
                        }
                    });

                    self.tableList = '<tr><td>名称</td>' + self.professList.map(v => `<td>${v.charge_name}</td>`).join('') +
                        '</tr><tr><td>单价（元）</td>' + self.professList.map(v => `<td>${v.money}</td>`).join('') + '</tr>';
                    self.notInfo();
                }).catch(err => {
                    self.isShow = false;
                    self.notInfo();
                });
            },
            /* 蒙层加载 */
            notInfo() {
                var self = this;
                setTimeout(() => {
                    self.isMonLay = false;
                }, 1000)
            },
            /* 确认收款 */
            confirmReceipt() {
                var self = this;
                if(!self.isClick) return false;
                let money = self.checkList;
                let submitMoneyList = [];
                money.map((v, j) => {
                    let l = {};
                    l.type = v;
                    l.money = self.payTypes['state' + v];
                    l.name = v == 0 ? '中国银联' : v == 1 ? '支付宝支付' : v == 2 ? '微信支付' : v == 3 ? '现金支付' : '';
                    submitMoneyList.push(l);
                });
                // 判断一卡通号码 是否存在
                if(self.gongbenPrice) {
                    if(!self.tableData.card_number) {
                        self.$message('请输入一卡通号码！');
                        return false;
                    } else if(!self.isNum(Number(self.tableData.card_number))) {
                        self.$message('请输入正确的一卡通号码！');
                        return false;
                    }
                    var m = {
                        card_number: self.tableData.card_number,
                        other_phone: self.tableData.other_phone
                    }
                    submitMoneyList.push(m);
                }
                apis.contApi.studentPayStatus(self.tableData.id, submitMoneyList).then(res => {
                    if(res.data.code == 0) {
                        self.getResource();
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            /* 价格改变、支付方式改变 */
            changeCheckList(num) {
                var self = this;
                let moneys = 0;
                for(let i of self.checkList) {
                    if(self.isNum(self.payTypes['state' + i])) {
                        if(self.payTypes['state' + i] < 0) {
                            self.payTypes['state' + i] = Math.abs(self.payTypes['state' + i]);
                        }
                        moneys += Number(self.payTypes['state' + i]);
                        continue
                    } else {
                        self.payTypes['state' + i] = 0;
                        this.$message('金额不对，请核对');
                        break
                    }
                }
                if(moneys > self.chargeData.total_money) {
                    if(self.isArr(num)) {
                        num = num.slice(-1).toString();
                    }
                    self.payTypes['state' + num] = 0;
                    moneys = 0;
                    this.$message('支付金额不能大于应缴金额');
                    self.checkList.map(v => {
                        moneys += Number(self.payTypes['state' + v]);
                    })
                }
                self.totalAmount = moneys;
            }
        }
    }
</script>

<style>
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    table {
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #d8d8d8;
        line-height: 35px;
        text-align: center;
    }

    .gray,
    .gray:hover {
        background: #bbb;
        border: none;
    }

    .barca {
        width: 140px;
        border: none;
        background: transparent;
        background-color: #00D1B2;
        border: 1px solid #00D1B2;
        color: white;
        outline: none;
        border-left: 1px solid #00D1B2;
        height: 32px;
        margin-left: 20px;
        cursor: pointer;
    }

    .barcan {
        width: 140px;
        border: none;
        background: transparent;
        background-color: #e6a23c;
        border: 1px solid #e6a23c;
        color: white;
        outline: none;
        border-left: 1px solid #e6a23c;
        height: 32px;
        margin-left: 20px;
        cursor: pointer;
    }

    .imgRotate {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        -webkit-transform: rotate(360deg);
        animation: rotation 0.4s linear infinite;
        -moz-animation: rotation 0.4s linear infinite;
        -webkit-animation: rotation 0.4s linear infinite;
        -o-animation: rotation 0.4s linear infinite;
    }

    #printContent {
        position: absolute;
        left: 0;
        right: 0;
        border: 1px solid #8C939D;
        font-size: 0.1rem;
        padding: 5px 0 20px 0;
        z-index: -99;
    }

    #printContent>.one {
        font-size: 19px;
        text-align: center;
        border-bottom: 1px solid #c4c4c4;
        height: 42px;
        line-height: 48px;
    }

    #printContent>.tit {
        font-size: 13px;
        text-align: center;
        line-height: 35px;
        height: 30px;
    }

    #printContent>.two>li {
        padding: 0 5px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    #printContent>.countMoney {
        text-align: right;
        color: #f00;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 15px;
        font-weight: bold;
    }

    #printContent>.two>li>span {
        flex: 1;
        text-align: left;
    }

    #printContent>.two>li>p {
        text-align: right;
    }

    #printContent>.three {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .demo-input-suffix {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sousuo {
        width: 700px;
        height: 32px;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 0px 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 4px;
    }

    .sousuo .erCode {
        width: 60px;
        height: 100%;
        background: url(../../static/img/qr_code.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .sousuo input {
        border: none;
        background: transparent;
        width: 500px;
        height: 100%;
        outline: none;
        text-indent: 6px;
        padding-right: 10px;
    }

    .sousuo>button {
        width: 140px;
        border: none;
        background: transparent;
        background-color: rgb(111, 140, 184);
        border: 1px solid rgb(111, 140, 184);
        color: white;
        outline: none;
        border-left: 1px solid #ddd;
        cursor: pointer;
    }

    .barCode {
        background: #fff;
        height: 100%;
        overflow-y: auto;
    }

    .barCode .barCode-box>p {
        text-align: center;
        line-height: 45px;
    }

    .barCode .barCode-box {
        max-width: 1200px;
        margin: 0 auto;
    }

    .demo-side {
        width: calc(100% - 40px);
        padding: 5px 20px 20px;
        border: 1px solid #f5f5f5;
    }

    .demo-side .studentInf {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 15px;
    }

    .demo-side .studentInf li {
        height: 30px;
    }

    .demo-side .studentInf li label {
        width: 80px;
    }

    .demo-side .studentInf li span {
        width: 180px;
    }

    .payment-Detail {
        width: 100%;
        border-collapse: collapse;
        height: 79px;
    }

    .payment-Detail tr:nth-child(1) {
        background: #dbdbdb;
    }

    .payment-Detail th,
    .payment-Detail td {
        border: 1px solid #000;
    }

    .profess-List {
        width: 100%;
        border-collapse: collapse;
    }

    .profess-List th,
    .profess-List td {
        border: 1px solid #000;
    }

    .payment {
        width: 100%;
        height: 55px;
        background: #5e87b0;
        border-radius: 5px;
        line-height: 17px;
    }

    .payment li {
        float: left;
        font-size: 17px;
        padding: 20px;
        color: white;
    }
    /* 补充样式 */

    .packagePro p {
        line-height: 48px;
        font-size: 17px;
    }

    .myTable {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .myTable td {
        height: 35px;
        border: 1px solid #ddd;
        padding: 5px 0;
    }

    .packagePayment {
        padding: 0 20px 20px;
    }

    .packagePayment .foot-pay {
        padding: 20px;
    }

    .packagePayment .foot-pay li {
        line-height: 35px;
    }

    .packagePayment .foot-pay li:nth-child(3) {
        margin: 0 -20px;
        padding: 0 20px;
        text-align: right;
        background-color: #e5e5e5;
    }

    .packagePayment .foot-pay li:nth-child(2) {
        display: inline-flex;
        flex-direction: column;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .packagePayment .foot-pay li:nth-child(2) .payMoney {
        display: inline-flex;
        flex-direction: column;
        padding: 2px 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .packagePayment .foot-pay li:nth-child(2) label {
        line-height: 30px;
        margin-left: 25px;
        padding: 3px 0;
    }

    .packagePayment .foot-pay li:nth-child(3) span.money {
        color: #ff1919;
        font-size: 18px;
    }

    .packagePayment .foot-pay li:nth-child(4) {
        text-align: right;
    }

    .packagePayment .foot-pay .countPas {
        margin-right: 3px;
    }

    .packagePayment .foot-pay mark {
        display: inline-block;
        background: none;
        width: 80px;
    }

    .packageTable>p {
        font-size: 17px;
        height: 48px;
        line-height: 48px;
        border: 1px solid #ddd;
        border-top: none;
    }

    .packageTable p span.money {
        padding: 0 5px 0 2px;
        color: #ff1919;
        font-size: 18px;
    }

    .submit-notice-num {
        margin: 0 0 15px 0;
    }

    .submit-notice-num p {
        display: inline-flex;
        white-space: nowrap;
        margin: 0 0 0 22px;
        align-items: center;
    }

    .submit-notice-num p pre {
        color: #FF0000;
    }

    .modelPop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }
</style>
